<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部商品" name="0"></el-tab-pane>
        <!-- 迭代智能问答产品上架页面优化 -->
        <!-- <el-tab-pane label="出售中的产品" name="1"></el-tab-pane>
        <el-tab-pane label="仓库中的产品" name="2"></el-tab-pane> -->
      </el-tabs>
      <div class="search-form">
        <el-form ref="searchForm" :model="searchForm" size="mini" :inline="true">
          <div>
            <el-form-item label="所属银行">
              <el-select style="width: 200px" v-model="searchForm.bankId" placeholder="请选择">
                <el-option v-for="item in bankList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input style="width: 200px" v-model="searchForm.name" placeholder="请输入产品名称"></el-input>
            </el-form-item>

            <!-- 迭代智能问答产品上架页面优化 -->
            <!-- <el-form-item label="额度区间">
              <el-input
                style="width: 100px"
                v-model="searchForm.minQuota"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item>-</el-form-item>
            <el-form-item>
              <el-input
                style="width: 100px"
                v-model="searchForm.maxQuota"
                placeholder="请输入"
              ></el-input>
            </el-form-item> -->
            <!-- 迭代智能问答产品上架页面优化 -->
            <!-- <el-form-item label="年化利率">
              <el-input
                style="width: 100px"
                v-model="searchForm.minAnnualRate"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item>-</el-form-item>
            <el-form-item>
              <el-input
                style="width: 100px"
                v-model="searchForm.maxAnnualRate"
                placeholder="请输入"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="产品状态" v-if="activeName == 0">
              <el-select style="width: 200px" v-model="searchForm.publishStatus" placeholder="请选择">
                <el-option label="全部" value="0"></el-option>
                <el-option label="出售中" value="1"></el-option>
                <el-option label="仓库中" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="来源">
              <el-select clearable style="width: 200px" v-model="searchForm.channelCode" placeholder="请选择贷款分类">
                <el-option v-for="item in product_channelList" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <!--            <el-form-item label="借款期限" prop="loanTerm">-->
            <!--              <el-select-->
            <!--                clearable-->
            <!--                style="width: 200px"-->
            <!--                v-model="searchForm.loanTerm"-->
            <!--                placeholder="请选择借款期限"-->
            <!--              >-->
            <!--                <el-option-->
            <!--                  v-for="item in loanTermList"-->
            <!--                  :key="item.value"-->
            <!--                  :label="item.label"-->
            <!--                  :value="item.value"-->
            <!--                >-->
            <!--                </el-option>-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item label="贷款分类" prop="productType">
              <el-select clearable style="width: 200px" v-model="searchForm.loanType" placeholder="请选择贷款分类">
                <el-option v-for="item in productCategoryList" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品类型">
              <el-select clearable style="width: 200px" v-model="searchForm.matchType" placeholder="请选择产品类型">
                <el-option v-for="item in mactchList" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="startTime">
              <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
                placeholder="选择开始日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日">
              </el-date-picker>
            </el-form-item>
            <el-form-item>-</el-form-item>
            <el-form-item>
              <el-date-picker v-model="searchForm.endTime" align="right" type="date" placeholder="选择结束日期"
                :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetList">重置</el-button>
              <el-button icon="el-icon-search" type="primary" @click="getlist('searchForm')">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div style="display: flex">
        <router-link v-btnpermission="$btnPer.productBtnrules.addProduct" :to="{ path: '/creatProduct' }">
          <el-button size="mini" type="primary" icon="el-icon-plus">新建产品</el-button>
        </router-link>
        <el-button v-btnpermission="$btnPer.productBtnrules.batchDelete" style="margin-left: 10px" size="mini"
          icon="el-icon-delete" @click="deleteMany()">批量删除</el-button>
      </div>
      <div style="margin: 20px 0">
        <el-table :data="tableData" border size="mini" @selection-change="selectTableList"
          :default-sort="{ prop: 'date', order: 'descending' }" v-loading="listLoading" row-key="id">
          <el-table-column :selectable="selecTableItem" type="selection" width="55" align="center"></el-table-column>
          <el-table-column align="center" width="350" label="产品名称">
            <template slot-scope="scope">
              <div class="productNameStyle">
                <div class="image">
                  <el-image style="width: 100px; height: 100px" :src="scope.row.pic"
                    :preview-src-list="[scope.row.pic]">
                  </el-image>
                </div>
                <div class="name-msg">
                  <div style="color: #222; font-weight: bold">
                    {{ scope.row.name }}
                  </div>
                  <div style="color: #999">ID: {{ scope.row.id }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品所属银行">
            <template slot-scope="scope">
              <span>{{ scope.row.bankName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="maxQuota" label="产品最大额度" sortable>
            <!-- <template slot-scope="scope"  prop="maxQuota">
              <span> {{ scope.row.maxQuota }}万</span>
            </template> -->
          </el-table-column>
          <el-table-column align="center" sortable label="年化利率" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.minAnnualRate }}% - {{ scope.row.maxAnnualRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="借款期限">
            <template slot-scope="scope">
              <span>{{ scope.row.loanTerm }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品类型">
            <template slot-scope="scope">
              <span>{{ getDicLabel(mactchList, scope.row.type) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="贷款分类" prop="loanType"></el-table-column>

          <el-table-column align="center" label="来源" prop="channelCode">
          </el-table-column>
          <el-table-column align="center" label="热门" prop="channelCode">
            <template slot-scope="scope">
              <span>{{ scope.row.enableTop == 1 ? "是" : "否" }} </span>
              <span @click="enableTop(scope.row)" class="cancelTop" style="color: #409eff">{{ scope.row.enableTop == 1 ?
                "取消热门" : "热门" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品状态">
            <template slot-scope="scope">
              <span style="color: #45ce4c" v-if="scope.row.publishStatus == 1">出售中</span>
              <span style="color: #faac51" v-if="scope.row.publishStatus == 2">仓库中</span>
            </template>
          </el-table-column>
          <el-table-column label="条件录入" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isEntered == 1" type="text" size="small"
                @click="openlog(scope.row)">详情预览</el-button>
              <div style="color: #409eff; cursor: pointer"
                v-if="scope.row.isEntered == 0 && scope.row.publishStatus == 2"
                @click="jump(scope.row.id, scope.row.bankId)">
                条件录入
              </div>
              <div style="color: #409eff" v-if="scope.row.isEntered == 1 && scope.row.publishStatus == 2"
                @click="jump(scope.row.id, scope.row.bankId)">
                修改条件
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" sortable label="创建时间" prop="createTime" width="180"></el-table-column>

          <el-table-column align="center" label="排序">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sort" @change="inputChange(scope.row, scope.row.sort)"
                placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="publishStatus" label="是否上架">
            <template slot-scope="scope">
              <el-switch @change="updateStatus(scope.row)" :active-value="1" :inactive-value="2"
                v-model="scope.row.publishStatus"></el-switch>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="sort" label="排序">
          </el-table-column> -->
          <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <router-link :to="{ path: '/productDetail', query: { id: scope.row.id } }, ">
                <el-button type="text" @click="detail(scope.row)" size="small">详情预览</el-button>
              </router-link>
              <el-button type="text" @click="copyText(scope.row)" size="small">复制链接</el-button>
              <!-- <el-button
                v-btnpermission="$btnPer.productBtnrules.editStatusUp"
                v-if="scope.row.publishStatus == 2 && scope.row.isEntered === 1"
                type="text"
                @click="updateStatus(scope.row)"
                size="small"
                >立即上架</el-button
              > -->
              <router-link v-btnpermission="$btnPer.productBtnrules.editProduct"
                :to="{ path: '/creatProduct', query: { id: scope.row.id } }, ">
                <el-button v-if="scope.row.publishStatus == 2" type="text" size="mini">编辑</el-button></router-link>
              <el-button v-btnpermission="$btnPer.productBtnrules.deleteProduct" v-if="scope.row.publishStatus == 2"
                size="small" @click="deleteItem(scope.row)" type="text">删除</el-button>

              <!-- <el-button
                v-btnpermission="$btnPer.productBtnrules.editStatusDown"
                v-if="scope.row.publishStatus == 1"
                type="text"
                @click="updateStatus(scope.row)"
                size="small"
                >立即下架</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="pageRight" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <dialog-diy title="产品详情" ref="dialogDiy">
      <el-tabs v-model="producteTab" @tab-click="checkClick">
        <el-tab-pane label="准入条件" name="0">
          <div class="rowBox">
            <el-row :gutter="20" v-for="(item, index) in dialogData" :key="index">
              <!-- {{ dialogData }} -->
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <i>{{ item.labal }}：</i>
                  <i v-for="(val, index) in item.list" :key="index">
                    {{ val }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  </i>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </dialog-diy>
  </div>
</template>

<script>
import {
  getProductList,
  deleteProduct,
  updataStatus,
  getProductDimension,
  getProductDetails,
  ProductenableTop,
  newgetProductDetails,
  updateSortData,
} from "@/api/product";
import { pickerOptions } from "./options";
import { timeFun } from "@/utils/date";
import dialogDiy from "@/components/dialogDiy";
import { getBankList } from "@/api/system";
export default {
  components: {
    dialogDiy,
  },
  filters: {},
  data() {
    return {
      activeName: "0",
      loanTermList: [],
      searchForm: {
        channelCode: "",
        name: "",
        minQuota: "",
        maxQuota: "",
        minAnnualRate: "",
        maxAnnualRate: "",
        publishStatus: "0",
        beginTime: "",
        endTime: "",
        matchType: "",
        bankId: "",
        loanType: "",
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      deleteList: [],
      listLoading: false,
      pickerOptions,

      producteTab: "0",

      dic: {},
      dialogData: [],
      bankList: [],
      productCategoryList: [],
      mactchList: [],
      product_channelList: [],
      nameproduct: "",
    };
  },
  async created() {
    await this.getBankList();
    this.loanTermList = await this.$getDictData("loan_term_list");
    this.productCategoryList = await this.$getDictData("product_cid");
    this.mactchList = await this.$getDictData("match_type");
    this.product_channelList = await this.$getDictData("product_channel");
    await this.getlist();
  },
  async mounted() { },
  methods: {
    getDicLabel(arr, value) {
      let item = arr.find((item) => {
        return item.dictValue == value;
      });
      return item.dictLabel;
    },
    async copyText(row) {
      row.type = "1";
      try {
        const currentEnv = process.env.BASE_API;
        var getip = currentEnv;
        var getindex = getip.indexOf("/api"); //获取指定字符串在原字符串条中的位置
        var getstr = getip.substring(0, getindex); //进行位置截取，从零到指定字符串所在的位置
        var obj = {
          text: "",
        };
        if (getstr == "https://dev-manage.julimeng.com") {
          obj.text =
            "https://dev-manage.julimeng.com/3h5/#/pageProduct/productDetail?" +
            "id=" +
            row.id +
            "&" +
            "type=" +
            row.type;
        } else if (getstr == "https://test-manage.julimeng.com") {
          obj.text =
            "https://test-manage.julimeng.com/3h5/#/pageProduct/productDetail?" +
            "id=" +
            row.id +
            "&" +
            "type=" +
            row.type;
        } else if (getstr == "https://uat-manage.shengdaiqifu.com") {
          obj.text =
            "https://dev-manage.julimeng.com/3h5/#/pageProduct/productDetail?" +
            "id=" +
            row.id +
            "&" +
            "type=" +
            row.type;
        } else {
          obj.text =
            "https://manage.shengdaiqifu.com/3h5/#/pageProduct/productDetail?" +
            "id=" +
            row.id +
            "&" +
            "type=" +
            row.type;
        }
        const textToCopy = obj.text;
        await navigator.clipboard.writeText(textToCopy);
        this.$message({
          type: "success",
          message: "复制成功!",
        });
      } catch (err) {
        console.error("复制失败", err);
      }
    },
    async enableTop(data) {
      let that = this;
      let { id, enableTop } = data;
      this.$confirm(
        enableTop == 1 ? "是否确认取消热门?" : "是否确认热门",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        let params = {
          status: enableTop == 1 ? 0 : 1,
          ids: [id],
        };
        ProductenableTop(params).then((res) => {
          if (res.code == 200) {
            that.$message({
              type: "success",
              message: enableTop == 1 ? "取消成功" : "置顶成功!",
            });
            setTimeout(() => {
              that.getlist();
            }, 500);
          }
        });
      });
    },
    async topTop() {
      let that = this;
      if (this.deleteList.length == 0) {
        this.$message({
          message: "请先选择要置顶的项",
          type: "warning",
        });
      } else {
        this.$confirm("是否确认置顶?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let params = {
            status: 1,
            ids: this.deleteList,
          };
          ProductenableTop(params).then((res) => {
            if (res.code == 200) {
              that.$message({
                type: "success",
                message: "置顶成功!",
              });
              setTimeout(() => {
                that.getlist();
              }, 500);
            }
          });
        });
      }
    },
    getBankList() {
      getBankList().then((res) => {
        if (res.code === 200) {
          this.bankList = res.data;
        }
      });
    },
    selecTableItem(row) {
      if (row.publishStatus === 2) {
        return true;
      }
    },
    inputChange(row, e) {
      console.log(row);

      var obj = {
        id: row.id,
        sort: e,
      };
      updateSortData(obj).then((res) => {
        if (res.code == 200) {
          // this.$message({
          //   type: "success",
          //   message: "更新成功",
          // });
          this.getlist();
        }
      });
    },

    updateStatus(val) {
      console.log(val);

      this.$confirm(
        `是否确认${val.publishStatus == 1 ? "上架" : "下架"}该产品？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        let params = {
          productIdList: [val.id],
          publishStatus: val.publishStatus,
        };
        updataStatus(params).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "更新成功",
            });
            this.getlist();
          }
        });
      }).catch(() => {
        this.tableData.forEach(item => {
          if (item.id == val.id) {
            item.publishStatus = val.publishStatus == 2 ? 1 : 2
          }
        })
      })
    },
    deleteItem(val) {
      let that = this;
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteProduct(val.id).then((res) => {
          if (res.code == 200) {
            that.$message({
              type: "success",
              message: "删除成功!",
            });
            setTimeout(() => {
              that.getlist();
            }, 500);
          }
        });
      });
    },
    deleteMany() {
      let that = this;
      if (this.deleteList.length == 0) {
        this.$message({
          message: "请先选择要删除的项",
          type: "warning",
        });
      } else {
        this.$confirm("是否确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          deleteProduct(this.deleteList.join(",")).then((res) => {
            if (res.code == 200) {
              that.$message({
                type: "success",
                message: "删除成功!",
              });
              setTimeout(() => {
                that.getlist();
              }, 500);
            }
          });
        });
      }
    },
    detail(row) {
      console.log(row);
    },
    resetList() {
      this.searchForm = {
        channelCode: "",
        name: "",
        minQuota: "",
        maxQuota: "",
        minAnnualRate: "",
        maxAnnualRate: "",
        publishStatus: "0",
        beginTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.getlist();
    },

    selectTableList(val) {
      this.deleteList = val.map((v) => v.id);
    },
    datafun(type, val) {
      let arr = [];
      if (type == "matchType") {
        arr = this.mactchList;
      } else if (type == "loanType") {
        arr = this.productCategoryList;
      } else if (type == "channelCode") {
        arr = this.product_channelList;
      }
      let str = [];
      val.forEach((v) => {
        arr.forEach((v1) => {
          if (v == v1.value) {
            str.push(v1.label);
          }
        });
      });
      return str.join(",");
    },
    getlist() {
      if (
        (this.searchForm.beginTime && !this.searchForm.endTime) ||
        (!this.searchForm.beginTime && this.searchForm.endTime)
      ) {
        return this.$message.warning("请填写开始日期或者结束日期哦");
      }
      if (this.searchForm.beginTime && this.searchForm.endTime) {
        if (!timeFun(this.searchForm.beginTime, this.searchForm.endTime)) {
          return this.$message.warning("结束时间必须大于开始时间");
        }
      }

      this.listLoading = true;
      getProductList(this.searchForm)
        .then((res) => {
          console.log("列表状态", res);

          res.data.list.forEach((v1) => {
            // v1.bankName = this.findbankName(v1.bankId);
            v1.matchType =
              v1.matchType &&
              this.datafun("matchType", v1.matchType.split(","));
            v1.loanType =
              v1.loanType && this.datafun("loanType", [v1.loanType]);
            // v1.loanTerm = this.$dictTypeFun(v1.loanTerm, "product_cid");
            v1.channelCode = this.datafun("channelCode", [v1.channelCode]);
            v1.loanTerm = v1.loanTerm
              .split(",")
              .map((v) => {
                return v + "期";
              })
              .join(" 、");
          });

          setTimeout(() => {
            var list = []
            var array = res.data.list;
            for (let index = 0; index < array.length; index++) {
              array[index].maxQuota = array[index].maxQuota + "万";
              // array[index].minAnnualRate = array[index].minAnnualRate + '% -' + array[index].minAnnualRate + '% '
              list.push(array[index]);

            }
            this.tableData = list;
            this.total = res.data.total;
            this.listLoading = false;
          }, 0);
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    findbankName(id) {
      const obj = this.bankList.find((v) => v.id == id);
      return obj.name;
    },
    handleClick(val) {
      this.searchForm.publishStatus = val.index;
      this.getlist();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getlist();
    },

    async openlog(row) {
      this.nameproduct = row.name;
      console.log(row);

      if (Object.keys(this.dic).length === 0) {
        const dicres = await getProductDimension();
        dicres.data.forEach((item) => {
          this.dic[item.conditions] = item;
        });
      }
      const dialogData = await newgetProductDetails({
        productId: row.id,
      });
      let arr = [];

      dialogData.data.forEach((val) => {
        let list = [];
        if (this.dic[val.conditions].valueType === "BETWEEN") {
          list.push(
            `${val.selectList[0].valueMin}~${val.selectList[0].valueMax}`
          );
        } else if (
          this.dic[val.conditions].valueType === "ENUM_MORE" ||
          this.dic[val.conditions].valueType === "ENUM"
        ) {
          val.selectList.forEach((it, index) => {
            if (index !== 0) {
              list.push(
                `；${this.handelConditions(val.conditions, it.dimensionId)}`
              );
            } else {
              list.push(this.handelConditions(val.conditions, it.dimensionId));
            }
          });
        } else if (this.dic[val.conditions].valueType === "EQUAL") {
          list.push(`${val.selectList[0].value}`);
        } else if (this.dic[val.conditions].valueType === "OP_EQUAL") {
          val.selectList.map((item, index) => {
            console.log(item);
            list.push(`${item.optionLabel}`);

            JSON.parse(item.value).map((val, v) => { });
          });
        } else if (this.dic[val.conditions].valueType === "OP_SCOPE") {
          val.selectList.map((item, index) => {
            list.push(`${item.optionLabel}`);
            // JSON.parse(item.value).map((val, v) => {
            //   list.push(
            //     `${
            //       val.leftOp == "NO"
            //         ? "无"
            //         : val.leftOp == "EQ"
            //         ? "="
            //         : val.leftOp == "<"
            //         ? "LT"
            //         : val.leftOp == "<="
            //         ? "LE"
            //         : ""
            //     },${val.leftValue},${val.un},${
            //       val.rightOp == "NO"
            //         ? "无"
            //         : val.rightOp == "EQ"
            //         ? "="
            //         : val.rightOp == "<"
            //         ? "LT"
            //         : val.rightOp == "<="
            //         ? "LE"
            //         : ""
            //     },${val.rightValue}`
            //   );
            // });
          });
        }

        arr.push({
          labal: this.dic[val.conditions].conditionsName,
          list: list,
        });
      });

      arr.unshift({
        labal: "产品名称",
        list: [`${row.name}(${row.type == 1 ? "个人" : "企业"})`],
      });

      this.dialogData = arr;
      this.$refs.dialogDiy.openlog();
    },

    handelConditions(conditions, id) {
      let str = "";
      this.dic[conditions].selectList.forEach((it) => {
        if (it.id === id) {
          str = it.label;
        }
      });
      return str;
    },

    hidelog() {
      this.$refs.dialogDiy.handleClose();
    },

    checkClick() { },

    jump(id, bankId) {
      this.$router.push({
        path: "conditionalIndex",
        query: { productId: id, bankId: bankId },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;

  .cancelTop {
    margin-left: 10px;
    cursor: pointer;
  }
}

.form-box {
  background-color: #fff;
  height: 700px;
  padding: 20px;
}

.productNameStyle {
  display: flex;
  height: 100px;

  .image {
    width: 100px;
    height: 100px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .name-msg {
    margin-left: 10px;
    padding: 10px 0;
    height: 100px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
}

/deep/ .disable-select-row {
  pointer-events: none;
  /* 禁止鼠标事件 */
  user-select: none;
  /* 禁止文本选择 */
  // background-color: #f5f7fa; /* 设置背景色为灰色 */
}

.el-row {
  height: 56px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  // height: 100%;
  border-radius: 4px;
}

.rowBox {
  padding: 0 0 20px 0;
}

.rowBox {
  .el-row:nth-child(odd) {
    .bg-purple {
      background-color: #f5f5f5;
    }
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 56px;
  padding-left: 14%;
  line-height: 56px;
  font-size: 16px;
  // color: #222222;
}

i {
  font-style: normal;
  width: 80px;
  height: 22px;
  font-size: 16px;
  color: #999999;
}
</style>
